<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    let data = {
        name: '尚硅谷',
        address: '北京',
        student: {
            name: 'tom',
            age: {
                rAge: 40,
                sAge: 30
            },
            friends: [
                {name: 'jerry', age: 20},
                {name: 'lucy', age: 18}
            ]
        }
    }
    //创建一个监视的实例对象，用于监视 data 中属性的变化
    const obs = new Observer(data)

    console.log(obs)

    let vm = {}

    vm._data = data = obs
    function Observer(obj) {
        const keys = Object.keys(obj)

        keys.forEach(key => {
            Object.defineProperty(this,key,{
                get() {
                    return obj[key]
                },
                set(v) {
                    console.log(`${key}属性被修改了`)
                    obj[key] = v
                }
            })
        })
    }
/*
    Object.defineProperty(data,'name',{
        get() {
            return data.name
        },

        set(v) {
            console.log('属性被修改了')
            data.name = v
        }
    })*/
</script>
</body>
</html>